<template>
  <v-app>
    <v-main class="backgroundimg">
      <v-container fluid class="maskbg">
        <material-card
          :width="420"
          class="ma-auto mt-10">
          <template slot="header">
            <h4 class="title mx-auto font-weight-bold mb-2">
              Login
            </h4>
          </template>
          <v-row>
            <v-col cols="12">
              <v-select
                v-model="language"
                :items="[{label: '简体中文', value: 'zh'}, {label: 'English', value: 'en'}, {label: 'ภาษาไทย', value: 'th'}]"
                prepend-icon="mdi-translate"
                item-text="label"
                item-value="value"
                label="Language"
              ></v-select>
            </v-col>
            <v-col cols="12">
              <v-text-field
                v-model="loginForm.username"
                label="First Name"
                prepend-icon="mdi-face"
              ></v-text-field>
            </v-col>
            <v-col cols="12">
              <v-text-field
                v-model="loginForm.password"
                :append-icon="showpassword ? 'mdi-eye' : 'mdi-eye-off'"
                prepend-icon="mdi-lock-outline"
                :type="showpassword ? 'text' : 'password'"
                label="Password"
                @click:append="showpassword = !showpassword"
              ></v-text-field>
            </v-col>
          </v-row>
          <template slot="actions">
            <v-spacer />
            <v-btn class="my-2" color="primary" :loading="loading" rounded outlined @click="handleLogin">Login</v-btn>
            <v-spacer />
          </template>
        </material-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      loading: false,
      showpassword: false,
      language: this.$store.state.app.language,
      loginForm: {
        username: '',
        password: '',
      },
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    },
    language(lang) {
      this.$i18n.locale = lang
      this.$vuetify.lang.current = this.$i18n.locale
      this.$store.dispatch('app/setLanguage', lang)
    }
  },
  methods: {
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    handleLogin() {
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
        this.loading = false
      })
      .catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style>
  .backgroundimg {
    background: url('../../assets/login.jpg') no-repeat;
    background-size: cover;
  }
  .maskbg {
    padding-top: 200px;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
  }
</style>